<template>
  <div class="home">
    <common-table :tableData="tableData"
                  :columns="columns"
                  :options="options"
                  :pagination="pagination"
                  :fetch="getList"
                  @selection-change="handleSelectionChange"
                  @row-click="handleRowClick"></common-table>
    <common-table :tableData="tableData2"
                  :columns="columns2"
                  :options="options"
                  :pagination="pagination"
                  :fetch="getList"
                  @selection-change="handleSelectionChange"
                  @row-click="handleRowClick"></common-table>
  </div>
</template>

<script>
import commonTable from './../components/Table-Template'
import mixin from './../dataSource/tableData.js'
import mixin2 from './../dataSource/tableData2.js'
export default {
  components: {
    commonTable
  },
  mixins: [mixin, mixin2],
  data () {
    return {
      // 表格数据
      tableData: [
        { name: '张三', age: '18', hobby: '选项1', time: '' },
        { name: '李四', age: '19', hobby: '选项2', time: '' }
      ],
      tableData2: [
        { name: '王五', age: '28', hobby: '选项2', time: '' },
        { name: '周六', age: '29', hobby: '选项1', time: '' }
      ]
      // mode: ''
    }
  },
  methods: {
    getList () {
      // loading 请求前为设为true， 成功和失败置为false
      //  this.options.loading = true
    },
    handleSelectionChange (selection) {
      console.log(selection)
    },
    handleEdit (row, index) {
      console.log('编辑', row, index)
    },
    handleDel (row, index) {
      console.log('删除', row, index)
    },
    handleRowClick (row, event, column) {
      console.log('click row:', row, event, column)
    }
  }
}
</script>
